<template>
    <div class="ServiceAudit">
        <div class="title">服务管理-企业发布职位</div>
        <div class="auditTop">
            <div class="left">
                <div class="firstDiv">
                    <span>{{jobInfo.companyName}}</span>
                    <span class="Ltrial">{{jobInfo.checkState==1?'(试用)':''}}</span>
                </div>
                <div class="secDiv">
                    <div>{{jobInfo.contactName}}</div>
                    <div>{{jobInfo.phone}}</div>
                    <!-- <button class="lgoutong">沟通</button> -->
                    <img @click="toCommunication" src="../../assets/imgs/duih.png" style="width:30px;height: 30px;margin-right: 20px;cursor:pointer;"/>
                </div>
            </div>
            <div class="leftB">
                <el-select v-model="value" value-key="id" placeholder="职位名称" @change="jobChange">
                    <el-option
                            v-for="item in companyInfo.jobList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <!--审核通过后，点击修改，试用期、试用期剩余时间隐藏-->
            <div class="trial" v-if="tryShow">
                <span>试用期：{{jobInfo.tryCooperNum ? jobInfo.tryCooperNum + '天': '---'}}</span>
                <span>试用期剩余时间：{{jobInfo.tryCooperTimeDays ? jobInfo.tryCooperTimeDays + '(天)' : '---'}}</span>
            </div>
            <span class="lbonus" v-if="showBouns">职位自荐奖金：{{jobInfo.jobList[0].bonus ? jobInfo.jobList[0].bonus :'---'}} K</span>
            <div class="right">
                <el-button class="second-button" @click="Popup(2)" v-if="b1">不通过</el-button>
                <el-button class="second-button" @click="Popup(1)" v-if="b2">通过</el-button>
            </div>
        </div>



        <div class="auditMain">
            <el-button
            class="second-button"
            @click="doClick(index)"
                       type="primary" plain
                       :key="index"
                       :class="{active:item.isActive}"
                       v-for="(item,index) in btnlist">
                {{item.label}}
            </el-button>
        </div>
        <!--内容-->
        <div class="Lcontent">
            <!--职位JD-->
            <!--职位PA-->
            <div class="information">
                <div class="BasicInfor">
                    <div>职位基本信息</div>
                    <div>职位名称：{{jobInfo.jobList[0].name}}</div>
                    <div>招聘人数：{{jobInfo.jobList[0].recruitingNumbers}}</div>
                    <div>职位年薪：
                      <span v-if="jobInfo.jobList[0].tax == 0">税前</span>
                       <span v-if="jobInfo.jobList[0].tax == 1">税后</span>
                      {{jobInfo.jobList[0].salaryPerMonthLow}}-{{jobInfo.jobList[0].salaryPerMonthHigh}}W/
                        {{jobInfo.jobList[0].salaryCount}}年
                    </div>
                    <div>工作地点：{{jobInfo.jobList[0].city}}</div>
                    <div>面试反馈时间：{{jobInfo.jobList[0].interFeedbackTimeIdStr}}</div>
                    <div>保证期：{{jobInfo.jobList[0].guaranteedPeriodIdStr}}</div>
                </div>
                <div class="BasicInfor">
                    <div>职位要求</div>
                    <div>职位描述：<span v-html="jobDesc"></span></div>
                    <div>任职要求：<span v-html="jobReq"></span></div>
                    <div>执业类型：{{jobInfo.jobList[0].licenseTypeIdStr}}</div>
                    <div>职位亮点：{{jobInfo.jobList[0].jobSpot}}</div>
                </div>
                <div class="BasicInfor">
                    <div>人员描述</div>
                    <div>工作年限：{{jobInfo.jobList[0].workTimeStr}}</div>
                    <div>学历要求：{{jobInfo.jobList[0].eduReqStr}}</div>
                    <div v-if="personFlag">必须:</div>
                    <div v-if="personFlag" v-for="item in talentNecessaryReqKey">&nbsp&nbsp&nbsp&nbsp
                        {{item}}：{{talentNecessaryReq[item]}}
                    </div>
                    <div v-if="personFlag">优先:</div>
                    <div v-if="personFlag" v-for="item in talentPriorityReqKey">&nbsp&nbsp&nbsp&nbsp
                        {{item}}：{{talentPriorityReq[item]}}
                    </div>
                    <!-- <div v-if="personFlag">有效期：{{jobInfo.jobList[0].validity}}</div> -->
                    <div v-if="personFlag">职位有效期：{{jobInfo.jobList[0].validity}}</div>
                </div>
            </div>
        </div>

        <!--弹窗 1试用期  2以合作-->
        <div class="lPopup_box" v-show="islabel">
            <div class="box_header">
                <i class="bleft"></i>
                <span>确认职位审核通过？</span>
                <i @click="docancel" class=" el-icon-close fl"></i>
            </div>
            <div class="box_body">
                <div class="really" v-if="opType==1">自荐奖金<input v-if="jobInfo.checkState==2" v-model="comBonus"
                                                                placeholder="请设置自荐奖金金额"></input>
                    <span v-if="jobInfo.checkState==1" style='color:red;margin-left: 10px;margin-right: 10px'>{{comBonus}}</span>K
                </div>
                <div class="really" v-if="opType==0">
                    确认 <span>{{jobInfo.jobList[0].name}}</span> 审核不通过吗？
                </div>
                <div class="jobonus really" v-if="jobInfo.checkState==2&&opType==1">职位佣金<input v-model="ourJobbonus" placeholder="请设置职位奖金金额"></input>K
                </div>
                <div class="lzhifu">
                    <div v-for="(item,index) in pws">
                        <input type="text" v-model="pws[index]" v-focus="index==aindex?true:false" :data-id="index"
                               @input="inputPwd" maxlength="1">
                    </div>
                </div>
                <p class="tal">请输入6位确认密码</p>
                <div class="lbtn">
                    <el-button class="close" @click="docancel" type="primary" plain>取消</el-button>
                    <el-button class="affirm" @click="doconfirm" type="primary" plain>确认</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Jobmodel from '@/components/EnterpriseCont/EnterpriseCont.vue'

    export default {
        name: "ServiceAudit",
        components: {
            Jobmodel
        },
        directives: {
            'focus'(el, binding, vnode) {
                // console.log(binding)
                if (binding.value) {
                    el.focus();
                } else {
                    el.blur();
                }
                el.onfocus = function () {
                }
                el.onblur = function () {
                }
            }
        },
        data() {
            return {
                btnlist: [
                    {label: "职位JD", isActive: true},
                    {label: "职位PA", isActive: false},
                ],
                input: '',
                islabel: false,
                isbtn: true,
                jobRow: [],
                companyInfo: [],
                value: '',
                textarea2: '',
                personFlag: false,//控制PA jd 显示
                tryShow: true,//控制试用信息和试用弹窗是否显示
                comBonus: '10',
                ourJobbonus: '',//职位佣金
                showBouns: false,
                b1: true,
                b2: true,
                pws: ['', '', '', '', '', ''],
                aindex: 0,
                opType: 0,
                staticData: [],
                talentNecessaryReq: {},
                talentPriorityReq: {},
                talentNecessaryReqKey: {},
                talentPriorityReqKey: {},
                comType: 1, //0、待审核，1、试用合作，2、已合作，3、暂不合作
                jobId: 0,
                companyId: 0,
                jobInfo: {
                    bonus: '',
                    jobList: []
                },

                jobDesc:'',
                jobReq:''
            }
        },
        mounted() {
            document.onkeydown = function (e) {
                if (e.code == "Backspace") {
                    this.clearPwd();
                }
            }.bind(this)
        },
        methods: {
            clearPwd() {
                setTimeout(() => {
                    if (this.aindex <= 0) {
                        this.aindex = 0;
                    } else {
                        this.aindex = this.aindex - 1;
                    }
                }, 250);
            },
            inputPwd(e) {
                if (e.data != null) {
                    if (parseInt(e.target.dataset.id) + 1 >= this.pws.length) {
                        this.aindex = parseInt(e.target.dataset.id);
                        //console.log("========"+this.aindex )
                    } else {
                        this.aindex = parseInt(e.target.dataset.id) + 1;
                        //console.log("********"+this.aindex )
                    }
                }
            },
            doClick(obj) {
                //console.log(obj)
                this.btnlist.forEach(item => {
                    item.isActive = false
                })
                this.btnlist[obj].isActive = true
                this.personFlag = obj == 1 ? true : false;
            },
            Popup(obj) {
                console.log('通过弹窗')
                if (obj == 1) {
                    //companyInfo.checkState 0、待审核，1、试用合作，2、已合作，3、暂不合作
                    this.opType = 1;
                    console.log("popip", this.companyInfo.checkState)
                    this.islabel = true;
                } else {// 2 审核不通过
                    this.opType = 0;
                    this.islabel = true;
                }
            },
            doconfirm() {
                console.log('弹窗确认')
                var password = this.$b.inputPwdMerge(this.pws);
                let jstate = 0;
                if (this.opType == 0) {
                    this.comBonus = 0;
                    this.ourJobbonus = 0;
                    jstate = 2;
                } else if (this.opType == 1) {
                    jstate = 1;
                } else {
                    this.$message({
                        type: 'error',
                        message: "操作有误"
                    });
                }
                var params = {
                    jobState: jstate,
                    jobId: this.jobRow.id,
                    password: password,
                    bonus: this.comBonus,
                    ourPosbonus: this.ourJobbonus
                }
                console.log('param', params)
                this.lAxios({
                    method: "post",
                    url: '/platform/updateJobState.do',
                    params: params
                }).then(res => {
                    if (res.data.status == 0) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.islabel = false;
                        if (this.opType == 1) {
                            this.$router.push({path: "/JobPosting", query: {type: '1'}});
                        } else if (this.opType == 0) {
                            this.$router.push({path: "/JobPosting", query: {type: '2'}});
                        }
                    } else {//失败
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                    //异常
                }).catch(err => {
                    //失败的回调函数
                    console.log(err);
                });
            },
            docancel() {
                console.log('弹窗取消')
                this.islabel = false;
            },
            jobChange(item) {
                this.jobId = item
                this.initData()
            },
            getStaticData(id) {
                for (let item of this.staticData) {
                    if (item.id == id) {
                        return item.content;
                        break;
                    }
                }
            },
            initData(){

                this.lAxios({
                method: 'post',
                url: '/platform/selectListJobInfo.do',
                params: {
                  //传参
                  companyId: this.companyId,
                  jobId: this.jobId
                }
              }).then(res => {
                //成功
                this.jobInfo = res.data.data ? res.data.data : {}
                this.jobInfo.jobList = res.data.data.jobList ? res.data.data.jobList : []
                let talentNecessaryReq = JSON.parse(this.jobInfo.jobList[0].talentNecessaryReq)
                let talentPriorityReq = JSON.parse(this.jobInfo.jobList[0].talentPriorityReq);

                Object.keys(talentNecessaryReq).map((key,item)=>{
                    let typevalue = talentNecessaryReq[key];
                    talentNecessaryReq[key] = this.getStaticData(typevalue);
                });
                Object.keys(talentPriorityReq).map((key,item)=>{
                    let typevalue = talentPriorityReq[key];
                    talentPriorityReq[key] = this.getStaticData(typevalue);
                });
                this.talentNecessaryReq  = talentNecessaryReq;
                this.talentPriorityReq  = talentPriorityReq;
                this.talentNecessaryReqKey = Object.keys(this.talentNecessaryReq);
                this.talentPriorityReqKey = Object.keys(this.talentPriorityReq);

                this.jobDesc = this.getTextAreaTo(this.jobInfo.jobList[0].jobDesc)
                  this.jobReq = this.getTextAreaTo(this.jobInfo.jobList[0].jobReq)
              })
              },
            toCommunication(){
              this.$router.push({path:'/CorporateCom'})
            },
              /**
   * 将换行符替换成标签
   * @param {*} strValue 需要修改的文本
   */
  getTextAreaTo(strValue) {
    return strValue.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
  }

        },
        created() {
            //1.取值
            this.staticData = JSON.parse(localStorage.getItem("staticData"));
            this.companyInfo = JSON.parse(localStorage.getItem("companyInfo"));
            this.jobRow = JSON.parse(localStorage.getItem("jobRow"));
            this.value = parseInt(this.jobRow.id)
            let name = localStorage.getItem("button");
            if (name == '审核通过') {//控制是否显示推荐奖金
                this.showBouns = true;
                this.b2 = false;
            } else if (name == '不通过') {
                this.b1 = false;
            }
            console.log("value", this.value)
            //2.判断是否显示试用信息
            if (this.companyInfo.checkState != 1) {
                this.tryShow = false;
            }
            this.companyId = this.$route.query.companyId;
            this.jobId = this.$route.query.id;
            this.initData()
        },
        beforeDestroy() {
            //3.清空数据
            // localStorage.removeItem("companyInfo")
            // localStorage.removeItem("jobRow")
        }
    }
</script>

<style lang="scss" scoped>
    .box_body > .really > input {
        padding-left: 10px;
        width: 160px;
        height: 24px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .ServiceAudit {
        box-sizing: border-box;
        // border: 1px solid #797979;
        font-size: 14px;
        position: relative;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .zj {
        font-size: 18px;
        margin-right: 10px;
    }

    .title {
        height: 33px;
        line-height: 33px;
    }

    .auditTop {
        line-height: 30px;
        padding: 20px;
        background-color: #fff;
        display: flex;
        align-items: center;
    }

    .left {
    }

    .firstDiv {

    }

    .secDiv {
        display: flex
    }

    .secDiv > div {
        margin-right: 15px;
    }

    .Ltrial {
        font-size: 12px;
        color: #ff3399;
        margin: 0 20px 0 10px;
    }

    .lgoutong {
        width: 44px;
        height: 26px;
        border: 1px solid #797979;
        background-color: white;
        border-radius: 4px;
    }

    .right {
        display: flex;
    }

    .right > button {
    }

    .right > button:nth-child(2) {
    }

    .auditMain {
        background-color: #fff;
    }

    .auditMain > button {
        width: 125px;
    }

    .auditMain > button:nth-child(1) {
        margin-right: 10px;
        margin-left: 2%;
    }

    .Lcontent {
        overflow-y: auto;
        flex-grow: 1;
        padding: 15px;
        background-color: #fff;
        // margin-left: 2%;
        /*height: 396px;*/

    }

    .leftB {
        width: 296px;
        height: 33px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .lbonus {
        position: absolute;
        top: 45px;
        left: 226px;
    }

    .lrecord {
        width: 96%;
        margin-left: 2%;
        margin-top: 60px;
    }

    .lrecord div {
        margin-bottom: 10px;
    }

    /*---------------信息审核----------------------*/
    .information {
        background-color: #fff;
    }

    .information > div {
        // margin-left: 2%;
        margin-top: 10px;
        /*height: 200px;*/
        background-color: #f2f2f2;
        /*background-color: pink;*/
    }

    /*-----------------试用---------------------*/
    .trial {
        float: right;
    }

    .trial > span {
        margin-right: 70px;
    }

    /*-------------------职位PA-------------------------*/
    .BasicInfor {
        display: flex;
        flex-direction: column;
        // margin-left: 5px;
    }

    .BasicInfor div {
        // margin-left: 15px;
        margin-top: 20px;
        margin-bottom: 15px;
        padding-left: 50px;

        &:first-child {
            padding-left: 20px;
        }
    }

    .BasicInfor div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
    }

    /*-------------------弹窗--------------------*/
    .lPopup {
        width: 100%;
        height: 100%;
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
    }

    .lPopup_box {
        width: 400px;
        background-color: white;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .box_header {
            height: 40px;
            background-color: #f7f9fc;
            padding: 0 15px;
            display: flex;
            align-items: center;

            .bleft {
                flex: .3;
                width: 3px;
                height: 16px;
                background-color: #3377ff;
                box-sizing: border-box;
                border: rgb(211, 219, 255) 1px solid;
                margin: 12px 10px;
            }

            span {
                font-size: 16px;
                font-weight: 700;
                color: #333;
                flex: 100;
            }

            i {
                flex: 5;
            }
        }
    }

    .box_body {
        padding: 25px 55px;
        /*text-align: center;*/
        .really {
            margin: 20px 0;
            font-size: 16px;
            color: #1f2e4d;
        }

        p {
            font-size: 14px;
            color: #f00;
        }

        .tal {
            text-align: left;
            margin-bottom: 60px;
        }
    }

    .lzhifu {
        // width: 300px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 30px auto 5px;

        input {
            width: 30px;
            height: 30px;
            text-align: center;
            border: 1px solid rgb(230, 233, 240);
            border-radius: 3px;
        }
    }

    // .password{
    //     display: flex;
    //     flex-direction: row;
    //     margin-left:55px;
    // }
    // .inp{
    //     width: 24px;
    //     height: 30px;
    //     border: 1px solid #797979;
    //     margin-right: 10px;
    // }
    // .lbtn > button {
    //     width:100px;
    //     height:40px;

    // }

    // .lbtn > button:nth-child(1) {
    //     margin-right: 10px;
    // }
    .lbtn {
        display: flex;
        justify-content: space-between;

        button {
            width: 140px;
            height: 40px;
            border: 1px solid rgb(230, 233, 240);
            background-color: rgb(247, 249, 252);
            border-radius: 5px;
            // margin-bottom: 10px;
        }

        .affirm {
            background-color: #3377ff;
            color: #fff;
        }
    }

    .ltanContent {
        width: 314px;
        height: 347px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        display: flex;
        flex-direction: column;
    }

    .ltanContent > div {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .ltanContent > div:nth-child(1) {
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        margin-top: 20px;
    }

    .ltanBox {
        display: flex;
        flex-direction: column;

    }

    .ltanBox > div {
        margin-top: 20px;
        margin-bottom: 10px;
        text-align: left;
        margin-left: 60px;
    }

    .ltanBox > div:nth-child(1) {
        margin-top: 10px;
    }

    .ltanBox > div > span {
        margin-right: 10px;

        &:nth-child(2) {
            margin-right: 0;
        }
    }

    .active {
        background-color: #3377ff;
        color: #fff;
    }
    .linp {
        height: 20px;
        width: 122px;
        margin-right: 5px;
    }
    .second-button{
      width: 125px;
      height: 50px;
      background: #EAF2FF;
      border: 1px solid #3377ff;
      color: #3377ff;
      font-size: 16px;
      // &:hover{
      //   background: #409EFF;
      //   color: #fff;
      // }
    }
</style>
